import { defineComponent } from 'vue';
import { Icon, NavBar, Tab, Tabs } from 'vant';
import './index.less';
import SearchRow from '../SearchRow';
import { getProjectList } from '@/api/home';
import MTable from '../MTable';
import { dateFormatter } from '@/utils';

export default defineComponent({
  name: 'Detail',
  props: {
    content: {
      type: String,
      default: ''
    },
    size: {
      type: Number,
      default: 15
    },
    filterDetail: {
      default: {}
    },
    tableDetail: {},
    requestApi: {
      required: false
    },
    title: { default: '' },
    datakey:{default:"month"},
    list: {},
  },
  emits: ['handleTab', 'search', 'viewLiDetail'],
  setup(props: any, { expose, slots, emit }) {
    const show = ref(false);
    const mTableRef = ref();
    const activeTab = ref(0);

    // const searchItem = ref({}) as AnyObject;
    const data = ref({}) as AnyObject;
    const datas = ref({}) as AnyObject;

    const handleSearch = () => {
      // searchItem.value = data.value.search;
      // console.log(data.value.search);
      console.log(datas.value.search);

      emit('search', datas.value.search);
    };

    const handleTab = (val: number) => {
      // 有key触发自动搜索
      if (datas.value.tab.key) {
        datas.value.search[datas.value.tab.key] = val;
      }
      emit('handleTab', val);
    };
    watch(
      () => show.value,
      (val) => {
        if (val) {
          datas.value = JSON.parse(JSON.stringify(props.filterDetail));
          console.log(datas.value.search);

          datas.value.list?.map((item: AnyObject) => (item.icon = ''));
        }
      }
    );
    expose({
      show,
      searchResult: mTableRef.value?.searchResult || {}
    });
    return () =>
      show.value && (
        <div class="detail_popup">
          <NavBar
            title={props.title}
            safe-area-inset-top
            fixed
            placeholder
            v-slots={{ left: () => <Icon name="cross" color="#000" /> }}
            onClickLeft={() => (show.value = false)}
          />
          {/* offset-top={window.screen.availHeight - window.outerHeight + 44} */}
          {datas.value.tab && (
            <Tabs onChange={handleTab} v-model:active={activeTab.value} sticky>
              {datas.value.tab.list?.map((tab: AnyObject) => (
                <Tab name={tab.value} title={tab.label}></Tab>
              ))}
            </Tabs>
          )}
          <SearchRow
            onSearch={handleSearch}
            datekey={props.datakey}
            data={datas.value}
            border={false}
          />

          <slot>
            {slots.default?.()[0]?.children ? (
              slots.default()
            ) : (
              <MTable
                ref={mTableRef}
                list={props.list}
                onViewDetail={(item: AnyObject) => emit('viewLiDetail', item)}
                requestApi={props.requestApi}
                renderList={props.tableDetail}
                searchItems={datas.value?.search || {}}
              />
            )}
          </slot>
        </div>
      );
  }
});
